screenshot-ui: Add screencast area indicator

It shows the screencast area during recording.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2103>

diff --git a/js/ui/screenshot.js b/js/ui/screenshot.js
index 54c56f8465bb32af44467c49b95028b8c1f725ef..840df466bcba56ccafd15c44dbdce9f91a54734a 100644 (file)
--- a/js/ui/screenshot.js
+++ b/js/ui/screenshot.js
@@ -1035,6 +1035,22 @@ var ScreenshotUI = GObject.registerClass({
         Main.layoutManager.screenshotUIGroup.add_child(
             this._stageScreenshotContainer);
 
+        this._screencastAreaIndicator = new UIAreaIndicator({
+            style_class: 'screenshot-ui-screencast-area-indicator',
+            visible: false,
+        });
+        this._screencastAreaIndicator.add_constraint(new Clutter.BindConstraint({
+            source: global.stage,
+            coordinate: Clutter.BindCoordinate.ALL,
+        }));
+        this.bind_property(
+            'screencast-in-progress',
+            this._screencastAreaIndicator,
+            'visible',
+            GObject.BindingFlags.DEFAULT);
+        // Add it directly to the stage so that it's above popup menus.
+        global.stage.add_child(this._screencastAreaIndicator);
+
         Main.layoutManager.screenshotUIGroup.add_child(this);
 
         this._stageScreenshot = new St.Widget({ style_class: 'screenshot-ui-screen-screenshot' });
@@ -1846,6 +1862,19 @@ var ScreenshotUI = GObject.registerClass({
         const [x, y, w, h] = this._getSelectedGeometry(false);
         const drawCursor = this._cursor.visible;
 
+        // Set up the screencast indicator rect.
+        if (this._selectionButton.checked) {
+            this._screencastAreaIndicator.setSelectionRect(
+                ...this._areaSelector.getGeometry());
+        } else if (this._screenButton.checked) {
+            const index =
+                this._screenSelectors.findIndex(screen => screen.checked);
+            const monitor = Main.layoutManager.monitors[index];
+
+            this._screencastAreaIndicator.setSelectionRect(
+                monitor.x, monitor.y, monitor.width, monitor.height);
+        }
+
         // Close instantly so the fade-out doesn't get recorded.
         this.close(true);